<template>
	<section>
		<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 20px;">
		  <el-breadcrumb-item :to="{ path: '/Draw' }">图纸库</el-breadcrumb-item>
		  <el-breadcrumb-item>{{nowname}}</el-breadcrumb-item>
		</el-breadcrumb>	
		<el-row  :gutter="20">
			<el-col :span="18"  :offset="2" style="margin-top: 50px;">
			
				<el-form :model="adddraw" status-icon class="demo-ruleForm" :rules="adddrawrule" ref="adddraw">
				  <el-form-item label="图纸名称" style="margin-bottom:50px;" prop="name">
				    <el-input v-model="adddraw.name" placeholder="图纸名称（15字以内）" style="width: 80%;" :disabled="type=='look'"></el-input>
				  </el-form-item>
				  <el-form-item label="图纸类型" style="margin-bottom:50px;" prop="courseStage">
				    <el-radio-group v-model="adddraw.courseStage" :disabled="type=='look'">
<!--				      <el-radio label="0">创业基础图纸</el-radio>
-->				      <el-radio label="1">案例分析图纸</el-radio>
				    </el-radio-group>
				  </el-form-item>
				  <el-form-item label="图纸选择" style="margin-bottom:50px;" prop="drawingTypeId">
				    <el-radio-group v-model="adddraw.drawingTypeId" v-if="type!='new'" disabled>
	 					<el-radio v-for="el in cities" :label="el.type" :key="el.type">{{el.name}}</el-radio>
				    </el-radio-group>
				    <el-radio-group v-model="adddraw.drawingTypeId" v-if="type=='new'">
	 					<el-radio v-for="el in cities" :label="el.type" :key="el.type">{{el.name}}</el-radio>
				    </el-radio-group>				    
				  </el-form-item>
				  <el-form-item label="图纸编辑" style="margin-bottom:50px;" prop="drawingTypeId">
				  	<div v-on:click="showDislog" v-if="adddraw.bqname" class="eltag">
				  		<el-tag type="success" >{{adddraw.bqname}}</el-tag>				  		
				  	</div>
				  </el-form-item>
				  <el-form-item label="所属商业模式版块" v-if="adddraw.courseStage==0" prop="businessModelId" label-width="150px" style="margin-bottom:50px;">
					    <el-select placeholder="请选择版块" v-model="adddraw.businessModelId">
					      <el-option v-for="el in bussinessList" :value="el.businessModelId" :label="el.name"></el-option>
					    </el-select>
				  </el-form-item>
				  <el-form-item style="margin-bottom:50px;padding-left: 25%;">
				    <el-button type="primary" @click.native="addSubmit" v-if="type=='new'"  :loading="addLoading">立即创建</el-button>
				    <el-button type="danger" @click.native="editSubmit" v-if="type=='edit'"  :loading="editLoading">更新图纸</el-button>
				    <el-button v-on:click="skip('/Draw')">返回</el-button>
				  </el-form-item>
				</el-form>	
				<el-dialog  title="图纸制作" v-dialogDrag custom-class="drawdislog" v-model="addFormVisible">
					<template >
						<dians v-if="adddraw.drawingTypeId==2" :tochild="Drawdian" ref="dianss"></dians>
						<fenxi v-if="adddraw.drawingTypeId==6" :tochild="Drawfenxi" ref="dianss"></fenxi>
						<lantu  v-if="adddraw.drawingTypeId==3":tochild="Drawlantu" ref="dianss"></lantu>
						<shangye v-if="adddraw.drawingTypeId==4" :tochild="Drawshangye" ref="dianss"></shangye>
						<yanjiang v-if="adddraw.drawingTypeId==5" :tochild="Drawyanjiang" ref="dianss"></yanjiang>
						<tiyan v-if="adddraw.drawingTypeId==1" :tochild="Drawtiyan" ref="dianss"></tiyan>
						<iframe v-show="adddraw.drawingTypeId==7" v-bind:src="'http://www.zcxy360.com/sandtable/naotu/index.html?use='+use" width="100%" height="1200px" id="naotu"></iframe>						
					</template>						
					<div slot="footer" class="dialog-footer">
						<el-button @click.native="addFormVisible = false">关闭</el-button>
						<el-button v-if="type!='look'" type="primary" @click.native="click" :loading="addLoading">提交</el-button>
					</div>				
				</el-dialog>	
			</el-col>
		</el-row>
	</section>
</template>
<script>
	import { drawlist,drawdelete,drawadd,drawone,drawedit,bussinesslist,drawnamerule} from '../../api/api';
	import dian from '../draw/dian.vue';
	import fenxi from '../draw/fenxi.vue';
	import lantu from '../draw/lantu.vue';
	import shangye from '../draw/shangye.vue';
	import yanjiang from '../draw/yanjiang.vue';
	import tiyan from '../draw/tiyan.vue';
	//import NProgress from 'nprogress'
	export default {
		data() {
			var rulesname=(rules,value,callback)=>{
				if(this.type=='new'){
					let params={name:this.adddraw.name};
					drawnamerule(params).then((r)=>{
						if(!r){
							callback(new Error('图纸名称重复'))
						}else{
							callback()
						}
					})					
				}else{
					if(this.adddraw.checkname!=this.adddraw.name){			
						let params={name:this.adddraw.name};
						drawnamerule(params).then((r)=>{
							if(!r){
								callback(new Error('图纸名称重复'))
							}else{
								callback()
							}
						})
					}else{
						callback()
					}					
				}
			}	
			let namelengthrule=(rule, value, callback)=>{
			  if (value.length > 15) {
			    callback(new Error('限制字数15字以内'))
			  } else {
			    callback()
			  }							
			}				
			return {
				addFormVisible: false,
				addLoading:false,
				editLoading:false,
				loading:false,
				id:this.$route.query.id,
				type:this.$route.query.type,
				nowname:'',
				users: [],
				tuzhicontent:{},
				bussinessList:[],
				use:0,
				Drawdian:{
					use:false,
					content:""
				},
				Drawfenxi:{
					use:false,
					content:""
				},
				Drawlantu:{
					use:false,
					content:""
				},
				Drawshangye:{
					use:false,
					content:""
				},
				Drawyanjiang:{
					use:false,
					content:""
				},
				Drawtiyan:{
					use:false,
					content:""
				},
				Drawnaotu:{
					use:false,
					content:""
				},
				adddraw:{
					name:"",
					drawingTypeId:"",
					courseStage:"1",
					businessModelId:"",
					bqname:""
				},
				param:"",
				adddrawrule: {	
					name: [
						{ required: true, message: '请填写图纸名称', trigger: 'blur' },
						{validator:rulesname,trigger: 'blur'},
						{validator:namelengthrule,trigger: 'blur'}
					],
					drawingTypeId:[
						{ required: true, message: '请选择图纸', trigger: 'blur' }
					],
					courseStage:[
						{ required: true, message: '请选择图纸类别', trigger: 'blur' }
					],
					
					businessModelId:[
						{ required: true, message: '请选择所属商业模式版块', trigger: 'blur' }
					]					
				},					
				cities:[{name:'消费者体验流程图',type:'1'},{name:'典型人物',type:'2'},{name:'服务蓝图',type:'3'},{name:'商业模式画布',type:'4'},{name:'电梯演讲',type:'5'},{name:'洞察分析',type:'6'},{name:'思维导图',type:'7'}],	
				addLoading: false
			}
		},		
        components:{'dians':dian,'fenxi':fenxi,'lantu':lantu,'shangye':shangye,'yanjiang':yanjiang,'tiyan':tiyan},
        watch:{
        	'adddraw.drawingTypeId':function(){
        		var _this=this;
 				$.each(_this.cities,function(e,value){
					if(_this.adddraw.drawingTypeId==value.type){
						_this.adddraw.bqname=value.name
					}
				})   
        	}
        },
		methods: {
			//页面跳转
		    skip(link){
		        this.$router.push(
		        	{
		        		path:link,
		        	}
		        )
		    },				
			getone:function(type){
				var params=this.id;
				drawone(params).then((res)=>{			
					if(!res.error){
						res.drawingTypeId=JSON.stringify(res.drawingTypeId);	
		 				$.each(this.cities,function(e,value){				
							if(res.drawingTypeId==value.type){
								res.bqname=value.name
							}
						}) 		
						res.content=res.content;
						res.score=Number(res.score);
						res.courseStage=JSON.stringify(res.courseStage);
						res.checkname=res.name;
						res.businessModelId=JSON.stringify(res.businessModelId);
						this.adddraw = Object.assign({}, res);
						if(this.adddraw.drawingTypeId=='1'){
							this.Drawtiyan.content=this.adddraw.content;
						}
						if(this.adddraw.drawingTypeId=='2'){
							this.Drawdian.content=JSON.parse(this.adddraw.content);
						}
						if(this.adddraw.drawingTypeId=='3'){
							this.Drawlantu.content=JSON.parse(this.adddraw.content);
						}
						if(this.adddraw.drawingTypeId=='4'){
							this.Drawshangye.content=JSON.parse(this.adddraw.content);
						}	
						if(this.adddraw.drawingTypeId=='5'){
							this.Drawyanjiang.content=JSON.parse(this.adddraw.content);
						}	
						if(this.adddraw.drawingTypeId=='6'){
							this.Drawfenxi.content=JSON.parse(this.adddraw.content);
						}		
						if(this.adddraw.drawingTypeId=='7'){	
							localStorage.setItem('use',0);		
							localStorage.setItem('Drawnaotu',this.adddraw.content);		
						}							
					}
				})
			},			
			showDislog:function(el){
				this.adddraw.content="";
				this.addFormVisible=true;
			},
			//获取商业模式列表
			getbussinesslist:function(){
				bussinesslist().then((res)=>{
					$.each(res, function(i,value) {
						value.businessModelId=JSON.stringify(value.businessModelId)
					});
					this.bussinessList=res;
				})
			},			
			addSubmit: function () {	
				if(!this.adddraw.content&&this.adddraw.drawingTypeId!='7'){
					this.$message({
						message: '图纸不能为空',
						type: 'error'
					});			
					return;
				}
				this.param=new URLSearchParams();
				this.$refs.adddraw.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {
					        confirmButtonText: '确定',
					        cancelButtonText: '取消',					
							type: 'warning'								
						}).then(() => {
							this.addLoading = true;
							this.param.append('name',this.adddraw.name);
							this.param.append('drawingTypeId',this.adddraw.drawingTypeId);
							this.param.append('content',this.adddraw.content);
							this.param.append('courseStage',this.adddraw.courseStage);
							if(this.adddraw.courseStage==0){
						    	this.param.append('businessModelId',this.adddraw.businessModelId);
							}								
							drawadd(this.param).then((r) => {
								if(!r.error){
									this.addLoading = false;
									this.$message({
										message: '添加成功',
										type: 'success'
									});
									if(this.adddraw.drawingTypeId==7){
										localStorage.removeItem('Drawnaotu')
									}
									this.$router.push({path:'./Draw'})
									this.$refs['adddraw'].resetFields();
									this.addFormVisible = false;
									this.param='';
								}else{
									this.addLoading = false;
									this.param='';
									this.$message({
										message: '添加失败',
										type: 'error'
									});										
								}
							}).catch(() => {
								this.addLoading = false;					
							});	
						});
					}
				});
			},		
			editSubmit: function () {			
				this.param=new URLSearchParams();
				this.$refs.adddraw.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							this.param.append('name',this.adddraw.name);
							this.param.append('drawingId',this.adddraw.drawingId);
							this.param.append('drawingTypeId',this.adddraw.drawingTypeId);
							this.param.append('content',this.adddraw.content);
							this.param.append('courseStage',this.adddraw.courseStage);
							if(this.adddraw.courseStage==0){
								this.param.append('businessModelId',this.adddraw.businessModelId);
							}								
							drawedit(this.param).then((r) => {
								if(!r.error){
									this.editLoading = false;
									this.$message({
										message: '修改成功',
										type: 'success'
									});
									if(this.adddraw.drawingTypeId==7){
										localStorage.removeItem('Drawnaotu')
									}
									this.$router.push({path:'./Draw'})
									this.$refs['adddraw'].resetFields();
									this.param='';
								}else{
									this.editLoading = false;
									this.param='';
									this.$message({
										message: '修改失败',
										type: 'error'
									});										
								}
							})
						});
					}
				});
			},				
			//页面跳转
			click:function(){
				this.$nextTick(() => {
					if(this.adddraw.drawingTypeId=='1'){
						this.Drawtiyan.content=this.$refs.dianss.myDiagram.model.toJson();
						this.adddraw.content=this.$refs.dianss.myDiagram.model.toJson();
					}
					if(this.adddraw.drawingTypeId=='2'){
						this.Drawdian.content=this.$refs.dianss.content;
						this.adddraw.content=JSON.stringify(this.$refs.dianss.content);
					}
					if(this.adddraw.drawingTypeId=='3'){
						this.Drawlantu.content=this.$refs.dianss.content;
						this.adddraw.content=JSON.stringify(this.$refs.dianss.content);
					}
					if(this.adddraw.drawingTypeId=='4'){
						this.Drawshangye.content=this.$refs.dianss.content;
						this.adddraw.content=JSON.stringify(this.$refs.dianss.content);
					}	
					if(this.adddraw.drawingTypeId=='5'){
						this.Drawyanjiang.content=this.$refs.dianss.content;
						this.adddraw.content=JSON.stringify(this.$refs.dianss.content);
					}	
					if(this.adddraw.drawingTypeId=='6'){
						this.Drawfenxi.content=this.$refs.dianss.content;
						this.adddraw.content=JSON.stringify(this.$refs.dianss.content);
					}	
					if(this.adddraw.drawingTypeId=='7'){
						this.Drawnaotu.content=localStorage.getItem('Drawnaotu');
						this.adddraw.content=this.Drawnaotu.content;
					}						
					this.$message({
						message: '编辑成功',
						type: 'success'
					});		
				this.addFormVisible=false;
					
				});				
			},
		},
		mounted() {
			this.getbussinesslist();
			if(this.type=='new'){
				this.nowname='添加图纸';
				this.use=1;	
			}
			if(this.type=='edit'){
				this.nowname='编辑图纸';
				this.getone()
			}	
			if(this.type=='look'){
				this.nowname='查看图纸';
				this.getone()
			}				
		}
	};

</script>
<style >
.drawdislog{
	width: 100%;
	top: 0!important;
}
.eltag{
	cursor: pointer;
}
</style>